import React, { useEffect, useState } from 'react';
import moment from 'moment'
import 'moment/locale/zh-cn'
import useStore from '../../useStore';
import { Button, Collapse, Popconfirm, Checkbox } from 'antd';
import { SaveOutlined } from '@ant-design/icons';
import { use_button_config } from './use_button_config';
import { fetchsync_util } from '../util/util';
import { dropByCacheKey } from 'react-router-cache-route';
const { Panel } = Collapse;
var storage = window.localStorage;
moment.locale('zh-cn')

const Button_config = () => {
    const { collapsed, setnowroute } = useStore();
    const [buttonlist, setButtonlist] = useState(use_button_config)

    const loadData = async (id) => {
        let rtdata = await fetchsync_util("/admin/sys/query_js_byid", 'POST', { id }, "json")
        let anpz = JSON.parse(rtdata.resultdata.formdata.anpz)
        console.log(anpz,"anpz");
        if (anpz) {
            buttonlist.forEach(item => {
                let obj = anpz.find(item2 => item.key == item2.key)
                console.log(obj,"obj");
                item.checkedList = obj ? obj.checkedList : []
                item.indeterminate = obj ? obj.indeterminate : false
                item.checkAll = obj ? obj.checkAll : false
            })
            setButtonlist([...buttonlist])
        }

    }

    useEffect(() => {
        loadData(JSON.parse(storage.pre_button_config_item).data.id)
    }, [])

    const onChange = (list, index) => {
        console.log(list,"list");
        buttonlist[index].checkedList = list
        buttonlist[index].indeterminate = !!list.length && list.length < buttonlist[index].options.length
        buttonlist[index].checkAll = list.length === buttonlist[index].options.length
        setButtonlist([...buttonlist])

    };

    const onCheckAllChange = (e, index) => {
        console.log(e,"e");
        e.stopPropagation();
        buttonlist[index].indeterminate = false;
        buttonlist[index].checkedList = e.target.checked ? buttonlist[index].options.map(item => item.value) : [];
        buttonlist[index].checkAll = e.target.checked
        setButtonlist([...buttonlist])
    };

    const handle_save = async () => {
        let anpz = []
        buttonlist.forEach(item => {
            let obj = {
                key: item.key,
                checkedList: item.checkedList,
                checkAll: item.checkAll,
                indeterminate: item.indeterminate
            }
            anpz.push(obj)
        })
        let rtdata = await fetchsync_util("/admin/sys/updateJsAnpz", 'POST', { anpz: JSON.stringify(anpz), id: JSON.parse(storage.pre_button_config_item).data.id }, "json")
        dropByCacheKey("js_list")
        dropByCacheKey("anpz_form")
        setnowroute({ route: "/shipSRM/sys/js_list", title: "业务角色" ,closeroute:"/shipSRM/sys/anpz_form"})
    }

    return (

        <div style={{
            height: "94%", backgroundColor: `#F1F1F1`, right: "1%", top: "5.9vh", overflow: "hidden",
            backgroundSize: "100% 100%", width: collapsed ? "94%" : "84%", position: "absolute", color: "white", fontSize: "0.8rem"
        }}>
            <div style={{
                width: "98%", height: "5%", position: "sticky", top: "0", left: "1%", backgroundColor: "white", color: "black", display: "flex",
                borderBottom: "2px solid #a91f24", zIndex: 998
            }}>
                <div style={{ width: "40%", textAlign: "left", paddingRight: "1rem", display: "flex", alignItems: "center", fontWeight: "600" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    工具栏
                </div>
                <div style={{ width: "60%", textAlign: "right", paddingRight: "1rem" }}>
                    <Popconfirm title={`确定要提交吗？`} onConfirm={handle_save} okText="确定" cancelText="取消">
                        <Button type="primary"
                            style={{ width: "6rem", height: '1.7rem', fontSize: "0.7rem", borderRadius: "5px", marginTop: "0.2rem" }}>
                            <SaveOutlined />提交
                        </Button>
                    </Popconfirm>
                </div>
            </div>
            <div style={styles.kshcontainer}>
                <Collapse defaultActiveKey={[]}>
                    {buttonlist.map((item, index) => {
                        return (
                            <Panel
                                header={
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <span>{item.title} ({item.checkedList.length}/{item.options.length})</span>
                                        <Checkbox
                                            indeterminate={item.indeterminate}
                                            onChange={(e) => onCheckAllChange(e, index)}
                                            checked={item.checkAll}
                                            style={{ marginLeft: '10px' }}
                                            onClick={(e) => e.stopPropagation()}
                                        >
                                            全选
                                        </Checkbox>
                                    </div>
                                }
                                key={index}
                                style={{ backgroundColor: 'white' }}
                            >
                                <div style={{ backgroundColor: '#f6f6f6', padding: '10px' }}>
                                    <Checkbox.Group options={item.options} value={item.checkedList} onChange={(e) => {
                                        onChange(e, index)
                                    }} />
                                </div>
                            </Panel>
                        )
                    })}
                </Collapse>
            </div>
        </div>
    )
}


export default Button_config

var styles = {
    titleStyle: {
        height: "1.2rem", position: "relative", width: "95vw",
        textIndent: "0.5rem", color: "#666666", backgroundColor: "white", lineHeight: "1.2rem",
        fontSize: "16px", fontWeight: "500", textAlign: "left", borderLeftStyle: "solid", borderWidth: "0.3rem", borderColor: "#a91f24",
        marginTop: "1rem", marginBottom: "0.5rem", letterSpacing: "0.05rem"
    },
    kshcontainer: {
        width: "98%", position: "absolute", 
        top: "7%", left: "1%", backgroundColor: "white", color: "black",
        borderRadius: "10px",
    },
}